<template>
  <div class="main">
    <header><TopNav :title="$route.meta.title" /></header>
    <main>
      <div class="info">
        <div class="userCard">
          <div>
            <img
              src="//s.weituibao.com/1583583975067/user-graduate%20(1).png"
              class="user_img"
            />
          </div>
          <section class="user_desc">
            <p>昵称：{{ user_idCard.nickName }}</p>
            <p>登录名：{{ user_idCard.loginName }}</p>
            <p>个性签名:{{ user_idCard.introduceSign }}</p>
          </section>
        </div>
      </div>
      <van-cell-group>
        <van-cell title="我的订单" @click="$router.push('/Order')">
          <van-icon name="arrow" />
        </van-cell>
        <van-cell title="账号管理" @click="$router.push('/userNum')">
          <van-icon name="arrow" />
        </van-cell>
        <van-cell title="地址管理" @click="$router.push('/addressList')">
          <van-icon name="arrow" />
        </van-cell>
        <!-- <van-cell title="关于我们" @click="$router.push('/Our')">
          <van-icon name="arrow" />
        </van-cell> -->
      </van-cell-group>
    </main>
  </div>
</template>

<script>
import { userIDCard } from "@/api/index";
import TopNav from "@/components/topNav.vue";
export default {
  name: "User",
  data() {
    return {
      user_idCard: {},
    };
  },
  created() {
    userIDCard().then((data) => {
      this.user_idCard = data.data;
    });
  },
  components: { TopNav },
};
</script>

<style scoped lang="less">
.main {
  margin-top: 1.7rem;
  main {
    width: 100%;
    .info {
      width: 88%;
      margin: 0 auto;

      .userCard {
        display: flex;
        width: 88%;
        padding: 0.66667rem 0.53333rem;
        justify-content: space-between;
        border-radius: 0.5rem;
        box-shadow: 0 0.05333rem 0.13333rem #269090;
        background-color: #1baeae;
        .user_img {
          flex: 1;
          width: 1.6rem;
          border-radius: 50%;
          margin-top: 0.10667rem;
        }
        .user_desc {
          flex: 1;
          margin: 0 0 0 1rem;
          font-size: 0.35rem;
          color: white;
          line-height: 0.35rem;
          p {
            margin-bottom: 0.35rem;
          }
        }
      }
    }
  }
}
</style>